{% extends "base.html" %}

{% block title %}API检测{% endblock %}

{% block head %}
{{ super() }}
<!-- DataTables -->
<link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<!-- DataTables button -->
<link rel="stylesheet" href="/static/bower_components/fx/buttons.bootstrap.min.css">
<!-- DataTables searchPanes -->
<link rel="stylesheet" href="/static/bower_components/fx/searchPanes.bootstrap.min.css">
<link rel="stylesheet" href="/static/bower_components/fx/select.bootstrap.min.css">
{% endblock %}

{% block content %}
<!-- 页面头 -->
<section class="content-header">
  <!--头部标题-->
  <h1>
    API巡检
    <!--    <small>advanced tables</small>-->
  </h1>
  <!--面包屑-->
  <ol class="breadcrumb">
    <li><a href="/"><i class="fa fa-home"></i> 主页</a></li>
    <li>监测数据</li>
    <li class="active">API巡检</li>
  </ol>
</section>

<!-- 页面内容 -->
<section class="content">
  <div class="row">
    <div class="col-xs-12">
      <!--表格1-->
      <div class="box">
        <div class="box-header with-border">
          <h3 id="check_time" class="box-title">检测时间：</h3>
        </div>
        <div id="" class="box-body table-responsive">
          <table id="example" class="table table-condensed table-bordered" style="font-size: 90%;width:100%">
            <thead>
            <tr>
              <th>ID</th>
              <th>标题</th>
              <th>地址</th>
              <th>方法</th>
              <th>请求头</th>
              <th>请求体</th>
              <th>提取数据</th>
              <th>错误码</th>
              <th>错误信息</th>
            </tr>
            </thead>
          </table>
        </div>
        <!-- Loading (remove the following to stop the loading)-->
        <!--        <div id="loading" class="overlay" style="display: block">-->
        <!--          <i class="fa fa-refresh fa-spin"></i>-->
        <!--        </div>-->
        <!-- end loading -->
      </div>
    </div>
  </div>
</section>


{% endblock %}


{% block script %}
<!-- DataTables -->
<script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- DataTables buttons-->
<script src="/static/bower_components/fx/dataTables.buttons.min.js"></script>
<script src="/static/bower_components/fx/buttons.bootstrap.min.js"></script>
<script src="/static/bower_components/fx/jszip.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>-->

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>-->
<script src="/static/bower_components/fx/buttons.html5.min.js"></script>
<!--<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>-->
<script src="/static/bower_components/fx/buttons.colVis.min.js"></script>

<!-- DataTables searchPanes-->
<script src="/static/bower_components/fx/dataTables.searchPanes.min.js"></script>
<script src="/static/bower_components/fx/searchPanes.bootstrap.min.js"></script>
<script src="/static/bower_components/fx/dataTables.select.min.js"></script>

<!-- Page specific script -->
<script>


    // 页面载入后
    $(document).ready(function () {
        // $('#loading').hide();
        var table = $('#example').DataTable({
            ajax: '/api/v1/mon/api_test',
            columns: [
                {data: 'Id'},
                {data: 'Title'},
                {data: 'Url'},
                {data: 'Method'},
                {data: 'Headers'},
                {data: 'Body'},
                {data: 'ExtractData'},
                {data: 'ErrorCode'},
                {data: 'ErrorMessage'},
            ],
            order: [[0, 'asc']],
            processing: true,
            language: {
                "url": "/static/language.json"
            },
            lengthChange: false,
            searchPanes: {
                initCollapsed: true,
                // cascadePanes: true
                columns: [6,7, 8]
            },
            scrollX: true,
            responsive: true,
            autoWidth: true,
            stateSave: false,
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            buttons: [
                'pageLength',
                {
                    extend: 'colvis',
                    collectionTitle: '显示/隐藏列'
                },
                'excel',
            ],
            columnDefs: [
                {
                    "targets": [],
                    "visible": false,
                },
                {
                    "targets": [7,8],
                    "createdCell": function (td, cellData, rowData, row, col) {
                        // if (cellData != '') {
                            $(td).css("color", "#E45959");
                        // }
                    }
                },
            ],
            initComplete: function () {
                table.buttons().container().appendTo('#example_wrapper .col-sm-6:eq(0)')
                table.searchPanes.container().prependTo(table.table().container());
                table.searchPanes.resizePanes();
                table.columns.adjust().draw();
            }
        });


        // 根据URL的search参数，自动搜索
        let searchString = getQueryString('search')
        if (searchString !== '') {
            console.log(searchString)
            table.search(searchString);
            table.draw();
        }

        // 解决sidebar toogle之后，datatables标题行错位问题
        $('.sidebar-toggle').click(function () {
            $('.dataTables_scrollHeadInner').css('width', '100%');
            $('#example').css('width', '100%');
            setTimeout(function () {
                table.columns.adjust().draw();
            }, 400);
        });


        // 刷新检测时间
        $.get('/api/v1/mon/api_test/time', function (data) {
            if (data.code === 200) {
                console.log(data.check_time);
                $('#check_time').text("检测时间：" + data.check_time)
            }
        });


    });


</script>
{% endblock%}